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HTML  JavaScript 


HTTP  Request 


Response  GET  Python  Data  Store 


AJAX  css 


POST 


Templates 


memcache 


The  big  picture... 


: 1 1 m 1 1 ; n 1 1 n 1 1 j ii 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN" 
"http://www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 
<head> 

<title>University  of  Michigan</title> 


HeartIT  Demo 


A web  server  produces  HTML 
which  is  handed  to  a browser  which 
needs  to  lay  it  out  in  a blink  of  an 
eye  and  have  it  pixel  perfect  as  god 
as  a print  brochure. 


HTML 


A way  of  marking  up  text  to  indicate  that  some  text  is  different  than 
other  text 

We  “tag”  portions  of  the  text  to  communicate  meaning 


<h  I >Google  App  Engine:  About</h  I > 
<p>Welcome  to  the  site  dedicated  to  learning  the 
Google  Application  Engine.  We  hope  you  find 
www.appenginelearn.com  useful. </p> 


<h  I >Google  App  Engine:  About</h  I > 
<p>Welcome  to  the  site  dedicated  to 


learning  the  Google  Application 
Engine. We  hope  you  find 
www.appenginelearn.com  useful.</p> 


fragment.htm 


* file: ///Users/csev/ Desktop/teach /appe  - Q-  Google  » | 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appcngincleam.com  useful. 


Whitespace  and 
line  wrapping. 


<li> 

<a  href="mailto:si539@ctools.umich.edu" 

title="Send  mail  to  si539@ctools.umich.edu"> 

Learning  from 

si539@ctools.umich.edu 

“View  Source” 

</a> 

</li> 

The  Web  is  a Young  Technology 


• Invented  in  early  I990’s 

• Popular  in  1994 

• Robert  Cailliau  - 
coFounder  of  theWorld- 
Wide-Web 


http://www.dr-chuck.com/media.php?id=70 


0 Yahoo! 


mmn 


An  Iterative  Process 


Designers  want  to  do  something 

They  figure  out  how  to  do  it  with  current  generation  browsers 

We  figure  out  requirements  - but  HMTL  gets  uglier  and  quirkier  - then  the 
HTML  starts  to  break 

We  develop  new  standards  that  handle  new  requirements  in  an  elegant 
manner 

New  Browsers  arrive  in  the  marketplace  with  the  new  standard 


History  of  HTML  / CSS 

HTML  1.0  - 1993  - The  Good  Old  Days  - life  was  simple 
HTML  2.0  - 1995  - Some  interesting  layout  features  - abused 
CSS  1-1996 
HTML  3.2-  1997 

HTML  4.0  - 1997  - Layout  moving  toward  CSS 
CSS  Level  2-1998 


HTML  4.01  - 1999 -What  we  use  today 


HTML  has  evolved  a *lot*  over 
the  years  - as  computers  and 
networks  have  gotten  faster. 


The  Good  Old  Days 


<h  I >Hello  World</h  I > 
Hi  there. 

<p><img  src=”x.gif”> 

A Paragraph 

<ul> 

<li>List  one 
<li>List  2 

</ul> 


In  the  good  old  days  you 
wrote  HTML  and  browsers 
displayed  it  - since  we  wrote  it 
by  hand  - and  modems  were 
slow  - it  was  never  too  long 
and  never  too  complex.  The 
browser  was  never  the  rate 
limiting  factor. 

Writing  HTML  was  like  using 
a simple,  weak  word 
processor.  The  tags  acted  as 
formatting  commands  to  the 
browser. 


The  Ugly  Middle  Ages 


Web  Designers  designed  to  browser  capabilities  - down  to  particular  minor 
versions  of  browsers. 

Extensive  testing  was  needed  on  lots  of  browsers 

Designers  used  tables,  nested  tables,  and  chopped  up  graphics  to  gain  control 
of  the  look  and  feel  or  web  pages  to  produce  a “print-like”  experience. 

HTML  was  UGLY,  Hard  to  develop,  and  brittle  - what  looked  superb  on  one 
browser  - often  was  broken  on  another  browser  - even  a later  release  of  the 
same  brower. 


The  Modern  Era 


• HTML  is  clean  and  simple 

• There  is  no  presentation  in  HTML  - font,  color,  spacing,  etc  etc 

• No  use  of  tables  except  for  tabular  data 

• CSS  controls  all  layout,  and  look  and  feel 

• Still  a bit  challenging  - but  converging 


1 990- 1 994 

HTML  was  simple  and  pages  looked  pretty  ugly. 

1 995- 1 999 

HTML  became  more  complex  and  each  browser 

was  different. 

2000-2005 

Browsers  slowly  supported  CSS  to  varying  levels. 
HTML  was  still  ugly  to  support  multiple  browsers. 

2005-2008 

New  browsers  supported  CSS.  Old  browsers  were 
still  pretty  pervasive  but  diminishing. 

2009+  The  last  “pre-CSS”  browser  (IE5)  is  < 0. 1 % 

_ 

http://www.w3schools.com/browsers/browsers_stats.asp 


What  does  this  mean  for  us? 


• Don’t  bother  with  the  intermediate  steps  :) 

• Either  keep  it  simple  - or  do  it  well  - simple  does  work 

• If  you  want  a professional  site  use  all  of  the  best  practices 

• Presentation  in  CSS  + Semantic  markup  in  HTML 

• http://validator.w3.org/ 

• http://iissaw.w3.org/css-validator/ 


<h  I >Google  App  Engine:  About</h  I > 
<p>Welcome  to  the  site  dedicated  to 


learning  the  Google  Application 
Engine. We  hope  you  find 
www.appenginelearn.com  useful.</p> 


fragment.htm 


* file: ///Users/csev/ Desktop/teach /appe  - Q-  Google  » | 

Google  AppEngine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appcngincleam.com  useful. 


Whitespace  and 
line  wrapping. 


Tags  have  a beginning  and  end... 


<h  I >Google  App  Engine: About</h  I > 
<p>Welcome  to  the  site  dedicated  to 
learning  the  Google  Application 
Engine.  We  hope  you  find 
www.appenginelearn.com  useful. </p> 


HTML  Tag  Basics 


Start  tag 


Tags  “mark  up”  the  HTML 
document.  The  tags  are  read  and 
interpreted  by  the  browser  - but 
now  shown. 


<h  I >Hello  World</h  I > 


End  tag 


Attribute 


<img  src=”x.gif”  /> 

Self-closing  tag 


A self  closing  tag  does  not  need  a 
corresponding  end  tag. 


What  about  < ‘s  in  HTML? 


HTML  Links 


One  of  the  key  things  about  HTML  is  making  a set  of  pages  and 
making  “hypertext”  links  amongst  those  pages 

Links  are  what  make  the  “web”  a “web”  - it  is  a web  of  interlinked 
documents. 

The  interlinked  nature  of  the  web  leads  to  the  “knowledge  “ the 
search  engines  like  Google  appear  to  have 


<h  I >The  First  Page</h  I > 

<P> 

If  you  like,  you  can  switch  to  the 
<a  href="http://www.dr-chuck.com/page2.htm"> 
Second  Page</a>. 

</p> 

A link  is  a “hot  spot”  on  the  page.  It 
can  be  text  or  an  image.  Often  it  is 
visually  marked  to  make  it  easier  to 
“notice”  so  as  to  engouage  users  to 

click! 

“a”  is  short  for  “anchor”  and  “href” 
is  short  for  “hypertext  reference” 


^ ~ http://www.dr-chuck.com/pagel.htm 

+ ' A http://www.dr-chuck.com/p-  C Google 


The  First  Page 


If  you  like,  you  can  switch  to  the  Second  Pape. 


<h  I >The  Second  Page</h  I > 

<P> 

If  you  like,  you  can  switch  back  to  the 


<a  href="page  I .htm"> 
First  Page</a>. 

</p> 

A link  is  a “hot  spot”  on  the  page.  It 
can  be  text  or  an  image.  Often  it  is 
visually  marked  to  make  it  easier  to 
“notice”  so  as  to  engouage  users  to 

click! 

“a”  is  short  for  “anchor”  and  “href” 
is  short  for  “hypertext  reference” 


^ ^ ^ http://www.dr-chuck.com/page2.htm 
1 + 0 http://www.dr-chuck.com/pc  C | (Qt  Google  » 

The  Second  Page 

If  you  like,  you  can  switch  back  to  the  First  Pape. 


Absolute  Reference 


<a  href="http://www.dr-chuck.com/page2.htm">Second  Page</a> 

I 


Where  to 
go  if  clicked. 


Clickable 

Text 


End 

tag 


<a  href="pagel.htm">First  Page</a> 
Relative  Reference 


Absolute  .vs.  Relative 

<a  href="http://www.di^chuck.com/page2.htm  >Second  Page</a> 


Hypertext  references  can  be  a full  URL  - and  refer  to  some  other 

page  on  anywhere  on  the  Internet. 


<a  href="pagel.htm">First  Page</a> 


Or  the  reference  can  be  a file  name  that  is  assumed  to  be  in  the 
same  folder  as  the  current  document  (relative  reference). 


Navigation  With  Anchor  Tags 


• Sometimes  we  want  to  make  a menu  that  provides  our  users 
consistent  navigation  across  page. 


COMMUNITY 

The  OAuth  community  is  dedicated  improving  the  spec  and  library  codebase,  spreading  awareness  of 
the  protocol  and  documenting  and  showing,  through  screencasts,  wireframes,  mockups  and  other 
illustrative  designs,  how  best  to  put  OAuth  into  use. 

A 


A List 


A List  of  Links 


<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 

<h  I >Google  App  Engine: About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com 
useful. 

</p> 


Learning  the  Google  App  Engine 

◄ !_►_!  c 

*|  fSle:///Users/csev/Desktop/te£©  - Qr  Google 

» 

EngineLearn 

Sites  . | . | 

Topics  < — Links 


Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appcngincleam.com  useful. 


Multiple  Files 


• We  can  put  multiple  files  in  the  same  directory  and  then  use  them  in 
relative  links. 


csev$  Is  -I 

-rw-r— r—  I csev  staff  618  Dec  18  22:56  index.htm 

-rw-r— r—  I csev  staff  883  Dec  1 8 22:57  sites.htm 

-rw-r— r—  I csev  staff  679  Dec  1 8 22:57  topics.htm 

csev$ 


<h  I ><a  href="index.htm">AppEngineLearn</a></h  I > 
<ul> 

<li><a  href="sites.htm">Sites</a></li> 

<li><a  href="topics.htm"  >Topics</a></li> 

</ul> 


csev$  Is  -1 

-rw-r—r— 

1 csev 

-rw-r— r— 

1 csev 

-rw-r—r— 

1 csev 

csev$ 

staff  618  Dec  18  22:56  index.htm 
staff  883  Dec  18  22:57  sites.htm 
staff  679  Dec  18  22:57  topics.htm 


Learning  the  Google  App  Engine 
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Google  App  Engine:  About 


Welcome  to  the  site  dedicated  to  learning  the  Google  Application 
Engine.  We  hope  you  find  www.appcngincleam.com  useful. 


csev$  Is  -I 

-rw-r— r—  I csev  staff  618  Dec  18  22:56  index.htm 

-rw-r— r—  I csev  staff  883  Dec  1 8 22:57  sites.htm 

-rw-r— r—  I csev  staff  679  Dec  1 8 22:57  topics.htm 

csev$ 


We  create  the 
appearance  of  a fixed 
‘menu”  by  including  the 
navigation  at  the  same 
place  in  each  page. 


Special  File  Names 

When  a URL  points  to  a directory  in  your  web  server,  it  looks  for  a 
file  with  a special  name: 

• index.html,  index.htm,  index.php,  default.htm,  etc.. 

While  there  is  a convention,  the  “default  file”  is  configurable  - so 
nothing  is  “sure” 

Usually  index.htm  or  index.html  is  a safe  bet 

This  only  works  when  viewing  through  a web  server  - when  viewing 
from  disk,  you  must  view  the  file. 


<body> 

<!—  Make  sure  to  style  the  h I — > 
<h  I >App  Engine:Topics</h  I > 

<ul> 

<li>Python  Basics</li> 

<li>Python  Functions</li> 
<li>Python  Python  Objects</li> 
<!—  Leave  these  two  out  for  a while 
<li>Hello  World</li> 

<li>The  WebApp  Framework</li> 

— > 

<li>UsingTemplates</li> 

</ul> 

</body> 


Learning  the  Google  App  Engine 
| C j *|  file:///Users/csev/Desktop/teacl  * Q-  Google  » 


App  Engine:  Topics 

• Python  Basics 

• Python  Functions 

• Python  Python  Objects 

• Using  Templates 


HTML  Comments 


Images 


Begin  Tag 


Images 


Which  image  to  display 


End  Tag 


<img  src="appengine.jpg" 

width-'  142"  height=" 1 09" 
alt="Google  App  Engine  Logo" 
style="float:right"  /> 


Optional  - makes 
display  quicker. 
Will  resize  to  fit. 


Put  the  image  on  the  right 
and  wrap  text  around  it. 


Show  this  when  hovering, 
images  are  off,  or  for 
screen  readers. 


All  information  is  communicated  through  the  attributes  of  the  img  tag. 


Images 

<hl> 

<img  src="appengine.jpg"  width="l42"  height=" ! 09" 
alt="Google  App  Engine  Logo" 
style="float:right'7> 

Google  App  Engine:  About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 


In  this  case,  the  file  appengine.jpg  needs  to  be  in  the  same  directory 

as  the  file  index.html. 


<h  I > 


<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo" 
style="float:right"/> 

Google  App  Engine:  About</h  I > 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appcngineleam.com  useful. 


<h  I > 

<img  src="appengine.jpg"  width="l42"  height="  1 09" 
alt="Google  App  Engine  Logo"  /> 

Google  App  Engine:  About</h  I > 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 


Learning  the  Google  App  Engine 
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Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google  Application  Engine.  We  hope 
you  find  www.appcngincleam.com  useful. 


<h  I > 

<img  src="appengine.jpg"  width="l42"  height="l09" 
alt="Google  App  Engine  Logo" 
style="float:right7> 

Google  App  Engine:  About</h  I > 

<p> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 


Learning  the  Google  App  Engine 

C & + @ file:///Users/csev/Desktop/teach/app 

* Google 

Google  App  Engine:  About 

Welcome  to  the  site  dedicated  to  learning  the  Google 

Application  Engine.  We  hope  you  find  ^ 

www.appcngincleam.com  useful. 

HTML  Document  Structure 


Well-Formed  HTML  Documents 


Browsers  need  to  know  what  contract  you  are  agreeing  to  (doctype) 
We  need  a section  for  meta-data  about  the  HTML  document  (head) 
And  then  the  displayable  content  of  the  HTML  document  (body) 


Outline  of  an  HTML  Document 


<!DOCTYPE  > 
<html> 

<head> 

meta-data.... 

</head> 


Contract  about  the 
HTML  style  used 
the  page. 


Metadata  about 


<body> 

Page  content.... 
</body> 

</html> 


the  page. 


Displayable  content 
of  the  page. 


Outline  of  an  HTML  Document 


<!DOCTYPE  > 
<html> 

<head> 
meta-data.... 
</head> 


</html> 


Contract  about  the 
HTML  style  used 
the  page. 

Metadata  about 
the  page. 


Displayable  content 
of  the  page. 


A Simple  but  Modern  Page 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


^ Learning  the  Google  App  Engine 
' file:///Users/csev/Desktop/tt  C Q?  Google 


Google  App  Engine:  About 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appcngincleam.com  useful. 


Browsers:  Lost  in  Transition 


Between  1 995  and  2003  browsers  were  different  - often  on 
purpose  to  attempt  to  make  their  market  share  “sticky” 

At  some  point  we  knew  there  needed  to  be  a future  where 
all  browsers  did  *exactly*  the  same  thing  based  on  CSS  and 
HTML  standards 


How  to  get  from  “here”  to  “there”  - no  one  could  “win” 


HTML+ 


1993 
SIMPLE 
UGLY 
HTML 


Quirks 

Mode 


Inconsistency 
is  OK 


Web  developers  and 
browsers  are  expected 
to  be  “perfect.” 
Responsibility  goes 
both  ways. 


Designing  for  the  Browsers  out  there... 


2009  IE7  IE6  IE8  Firefox  Chrome 

Safari  Opera 

August  15.1%  13.6%  10.6%  47.4%  7.0% 

3.3%  2.1% 

July  15.9%  14.4%  9.1%  47.9%  6.5% 

3.3%  2.1% 

Jur 

Ma 

Ap 

Ma 

Fel 

Jar 

20< 

Nov 

Sep 

July 

Ma^ 

Mar 


No\ 

Sep 


2009 

IE7 

IE6 

IE8 

August 

15.1% 

13.6% 

10.6% 

July 

15.9% 

14.4% 

9.1% 

June 

18.7% 

14.9% 

7.1% 

May 

21.3% 

14.5% 

5.2% 

April 

23.2% 

15.4% 

3.5% 

March 

24.9% 

17.0% 

1.4% 

February 

25.4% 

17.4% 

0.8% 

January 

25.7% 

18.5% 

0.6% 

July 


May 

March 

January 


44.4% 


40,7% 

36.7% 

30.1% 


40.1% 


46.0% 

49.4% 

55.7% 


3.5% 


2.8% 

3.0% 

2.8% 


1.2% 


1.2% 

1.2% 

1.3% 


3.5% 


2.7% 

2.4% 

2.2% 


2.6% 


3.4% 

4.1% 

4.4% 


0.5% 


Chrome  Safari 


7.0% 

3.3% 

6.5% 

3.3% 

6.0% 

3.1% 

5.5% 

3.0% 

4.9% 

3.0% 

4.2% 

3.1% 

4.0% 

3.0% 

3.9% 

3.0% 

0.7% 

0.7% 

1.0% 


www.w3schools.com/browsers/browsers  stats.as 


You  get  to  make  a choice... 


(a)  Do  you  want  to  be  lazy  and  sloppy  and  hope  that  your 
pages  look  good  across  multiple  browsers  and  multiple 
versions  of  the  same  browsers 

(b)  Do  you  want  to  be  professional  and  have  your  pages  to 
render  identically  across  all  browsers? 

If  you  choose  (b)  - you  take  on  some  additional  responsibility. 


DOCTYPE:  Indicating  your  Choice 


• Browsers  look  at  the  first  line  of  your  HTML  file  to  see  is 
you  have  agreed  to  comply  to  HTML  standards 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 


<head> 

<title> Learning  the  Google  App  Engine</title> 
</head> 


<body> 

<h  I >Google  App  Engine: About</h  I > 


Which  DOCTYPE 


<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> 


<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 Transitional//EN"> 

<!doctype  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0I//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 


http://www.webmasterworld.com/html/306 1 635.htm 


Which  DOCTYPE? 


Easy  to  start  a fight  - just  Google  “what  is  the  best  doctype” 

• Loose  - legacy 

• Transitional  - Mix  of  Developers 

• Strict  - New  Project  which  can  enforce  rules  from  the  start 
http://www.webmasterworld.com/html/306 1 635.htm  (and  others) 


Well-Formed  HTML  Documents 


Browsers  need  to  know  what  contract  you  are  agreeing  to  (doctype) 
We  need  a section  for  meta-data  about  the  HTML  document 
And  then  the  displayable  content  of  the  HTML  document 


A Valid  Web  Document 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


^ Learning  the  Coogle  App  Engine 
' file:///Users/csev/Desktop/tt  C Q?  Google 


Google  App  Engine:  About 


Welcome  to  the  site  dedicated  to  learning  the  Google 
Application  Engine.  We  hope  you  find 
www.appcngincleam.com  useful. 


A Valid  Web  Document 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0 1 //EN" 


"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<P> 


Contract  about  the 
HTML  style  used 
the  page. 


Metadata  about 
the  page. 


Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


Displayable  content 
of  the  page. 


Checking  Validity 


• We  can  check  to  see  if  a page  “meets  the  rules”  - does  it  live  up  to  its 
doctype? 

• http://validator.w3.org 

• Enter,  HTML,  upload  a file,  or  enter  a web-accessible  URL 


Validation  Output:  4 Errors 


O Line  13,  Column  7.  end  tag  for  "p"  omitted,  but  OMITTAG  NO  was  specified. 

</body  > 

You  may  have  neglected  to  close  an  element,  or  perhaps  you  meant  to  "self-close’'  an 
element,  that  is,  ending  it  with  7>"  instead  of 


Less-than-successful 


Note: When  the  validator  fails, 
only  look  at  the  first  message 
and  fix  that  - and  then  re-run. 

One  simple  error  will  often 
cascade  into  30-40  “The 
validator  is  lost  and  confused 
errors”. 


Success 


<!DOCTYPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.01  //EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Learning  the  Google  App  Engine</title> 

<meta  http-equiv="Content-Type"  content="text/html;charset=utf-8"  > 
</head> 

<body> 

<h  I >Google  App  Engine: About</h  I > 

<P> 

Welcome  to  the  site  dedicated  to 
learning  the  Google  Application  Engine. 

We  hope  you  find  www.appenginelearn.com  useful. 

</p> 

</body> 

</html> 


To  fix  the  warning  - we 
add  a header  to  indicate 
the  character  set  of  our 
document. 


Now  Playing  on  Netfact  TV 


Sakai  Project 
Sakai  Planet  Blog 


This  site  contains  a bunch  of  stuff  including  software,  television  shows,  and 
other  miscellaneous  material.  This  also  includes  a number  of  activities  and  sites 
which  I have  done  with  my  good  friend  Richard  Wiggins. 

Recent  Video:  Dr.  Chuck  Goes  Motocross  Racing 
Funny  Video:  Mandy  Birthday  Project  - Remix 

Updated:  Community  Information  Too  I Kit  - Building  Community  Networks 


Web/Multimedia  sites 
A Film  About  Brent  and  His  ATV 
How  to  install  a hardwood  floor  in  4 minutest 
Dr.  Chuck  goes  motocross  racing  (2007) 

Dr.  Chuck  goes  stock  car  racing  (2002)  C 

Audition  Tape  which  we  sent  to  TechTV  which  was  rejected  :(. 

Making  a Simple  Cartoon  Three  short  animations  from  Chuck  and  Brent. 
Nuthin'  But  Net  A Television  show 

NewsTalk  870  • Rich  and  I were  on  the  radio  once  per  month  from  the  mid  90's 
through  2004. 

More  Multimedia  Projects... 

Software  Tools 

PHP  image  software  for  v300  and  Troo-600  SMS 
ClipBoard-2000  - Distance  Education  Software 
Sync-O-Matic  2000  - Distance  Education  Software 
Other  software  Tools 

Projects 

Practical  Home  Networking  - A book  that  Chuck  and  Rich  almost  got  written. 
(Version  1,  Version  2,  Version  3,  and  Version  4) 

The  Community  Information  Toolkit  - A project  to  provide  public  libraries  and 
other  organizations  a start  on  using  Internet  in  Commmunity  Networking. 


Markup  Validation  Service 

Check  the  markup  (HTML,  XHTML)  of  Web  documents 


Online  Lecture:  HTML  Overview 

Production  date:  1997  This 
lecture  provides  a basic 
overview  of  HTML  and  Its  use. 
This  is  a lecture  from  a folly- 
online  course  on  the  internet 
and  technology.  Lecturer 
Charles  Severance  Details:  50 
minutes,  Real  Media  28kbps. 


Jump  To:  Important  Warnings 


Validation  Output 


This  page  is  not  Valid  (no  Doctype  found)! 


Result:  Failed  validation,  47  Errors 

Address : 


Photo  log  last  update:  September  24  2007  09:21:39  PM 
Blog  last  update:  September  20  2007  10:01:30  PM 


http : //vwwv . dr-chuck . com/ 

Encoding:  Utf-8  (detect  automatically)  j' 

Doctype  : (no  Doctype  found) 

Root  Element:  html 


(detect  automatically) 


< > 

<HEAD> 

< -'GENERATOR"  CONTENT ="Adobe  PageMill  3.0Win"> 

< >dr-chuck.com  </ FI  > 

</  > 

< BGCOLOR="#OOOOOC>"  LIN K="#AAAAAA"  VLI N K="#AAAAAA"  ALIN K="#AAAAAA"> 

<table  Border=0> 

<tr> 


<!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN"  "http:// 
www.w3.org/TR/xhtml  I /DTD/xhtml  I -strict.dtd"> 

<html  xmlns="http://www.w3.org/ 1 999/xhtml"  xml:lang="en"> 

<head> 

<title>University  of  Michigan</title> 


Summary 


• HTML  has  gone  through  many  changes  and  evolutions 

• It  started  clean  and  simple  - then  got  ugly  and  nasty  - now  we  are 
back  to  a clean  and  simple  approach 

• HTML  Markup  needs  to  focus  on  meaning  - not  formatting 

• Formatting  is  handled  using  CSS  - Cascading  Style  Sheets 


